<template>
  <el-dialog
    :title="mode === 'edit' ? '修改备件' : '新增备件'"
    v-model="visibleInner"
    width="90%"
    append-to-body
    @open="onOpen"
    class="fix-footer-dialog"
    :style="{ '--dlg-h': dialogHeight }"
  >
    <!-- 主信息 -->
    <el-form
      ref="formRef"
      :model="form"
      :rules="rules"
      label-width="160px"
      class="top-form"
    >
      <!-- 备件信息模块 -->
      <div class="form-module">
        <div class="module-header">备件信息</div>
        <el-row :gutter="12">
          <el-col :span="6">
            <el-form-item label="备件编码" prop="code">
              <el-input
                v-model="form.code"
                :disabled="mode === 'edit' && lockCodeOnEdit"
                placeholder="唯一，必填, 大写字母)"
                maxlength="64"
                @input="onCodeInput"
                inputmode="latin"
              />
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="备件名称" prop="name">
              <el-input v-model="form.name" placeholder="备件名称" />
            </el-form-item>
          </el-col>
        </el-row>
      </div>

      <!-- 基本信息模块 -->
      <div class="form-module">
        <div class="module-header">基本信息</div>
        <el-row :gutter="12">
          <el-col :span="6">
            <el-form-item label="规格" prop="spec">
              <el-input v-model="form.spec" placeholder="请输入规格" />
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="型号" prop="model">
              <el-input v-model="form.model" placeholder="请输入型号" />
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="材质" prop="material">
              <el-input v-model="form.material" placeholder="请输入材质" />
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="品牌" prop="brand">
              <el-input v-model="form.brand" placeholder="请输入品牌" />
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="厂商" prop="manufacturer">
              <el-input v-model="form.manufacturer" placeholder="请输入厂商" />
            </el-form-item>
          </el-col>
        </el-row>
      </div>

      <!-- 库存信息模块 -->
      <div class="form-module">
        <div class="module-header">库存信息</div>
        <el-row :gutter="12">
          <el-col :span="6">
            <el-form-item label="最低库存" prop="minStock">
              <el-input-number v-model="form.minStock" :min="0" :precision="0" :step="1" controls-position="right" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="最高库存" prop="maxStock">
              <el-input-number v-model="form.maxStock" :min="0" :precision="0" :step="1" controls-position="right" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="总库存" prop="stockTotal">
              <el-input-number v-model="form.stockTotal" :min="0" :precision="0" :step="1" controls-position="right" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="当前库存" prop="stockAvailable">
              <el-input-number v-model="form.stockAvailable" :min="0" :precision="0" :step="1" controls-position="right" style="width: 100%" />
            </el-form-item>
          </el-col>
        </el-row>
      </div>

      <!-- 备件所属模块 -->
      <div class="form-module">
        <div class="module-header">备件所属</div>
        <el-row :gutter="12">
          <el-col :span="6">
            <el-form-item label="备件所属" prop="spareClass">
              <el-select v-model="form.spareClass" placeholder="请选择备件所属" @change="handleParentTypeChange" clearable>
                <el-option label="部件" value="COMPONENT" />
                <el-option label="零件" value="PART" />
                <el-option label="子设备" value="MODULE" />
                <el-option label="母设备" value="MACHINE" />
              </el-select>
            </el-form-item>
          </el-col>

          <!-- 如果选择了子设备或母设备，显示设计温度、设计压力和电机功率 -->
          <el-col v-if="form.spareClass === 'MODULE' || form.spareClass === 'MACHINE'" :span="6">
            <el-form-item label="设计温度(℃)" prop="designTemp">
              <el-input-number v-model="form.designTemp" placeholder="请输入设计温度" :min="0" style="width: 100%" />
            </el-form-item>
          </el-col>

          <el-col v-if="form.spareClass === 'MODULE' || form.spareClass === 'MACHINE'" :span="6">
            <el-form-item label="设计压力(MPa)" prop="designPress">
              <el-input-number v-model="form.designPress" placeholder="请输入设计压力" :min="0" style="width: 100%" />
            </el-form-item>
          </el-col>

          <el-col v-if="form.spareClass === 'MODULE' || form.spareClass === 'MACHINE'" :span="6">
            <el-form-item label="电机功率(KW)" prop="motorPower">
              <el-input-number v-model="form.motorPower" placeholder="请输入电机功率" :min="0" style="width: 100%" />
            </el-form-item>
          </el-col>
        </el-row>
      </div>

      <!-- 备注模块 -->
      <div class="form-module">
        <div class="module-header">备注说明</div>
        <el-row :gutter="12">
          <el-col :span="24">
            <el-form-item label="备注说明" prop="remark">
              <el-input v-model="form.remark" type="textarea" :rows="2" placeholder="备注说明" />
            </el-form-item>
          </el-col>
        </el-row>
      </div>

    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" :loading="submitting" @click="submit">确 定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive, computed } from "vue";
import { ElMessage } from "element-plus";

/** Props */
const props = defineProps({
  visible: { type: Boolean, default: false },
  mode: { type: String, default: "add" },
  lockCodeOnEdit: { type: Boolean, default: true },
  model: { type: Object, default: () => ({}) },
  unitOptions: { type: Array, default: () => ["个", "台", "套", "米", "公斤"].map(v => ({ label: v, value: v })) },
  statusOptions: { type: Array, default: () => [{ label: "启用", value: 0 }, { label: "停用", value: 1 }] },
  typeOptions: { type: Array, default: () => [{ label: "普通", value: 0 }, { label: "特殊备件", value: 1 }] },
  submitting: { type: Boolean, default: false },
  dialogHeight: { type: String, default: "82vh" },
});

/** Emits */
const emit = defineEmits(["update:visible", "submit", "open"]);

/** v-model 代理 */
const visibleInner = computed({
  get: () => props.visible,
  set: (v) => emit("update:visible", v),
});

/** 选项代理 */
const unitOptionsInner = computed(() => props.unitOptions);
const statusOptionsInner = computed(() => props.statusOptions);
const typeOptionsInner = computed(() => props.typeOptions);

/** 主表单 & 校验 */
const formRef = ref();
const form = reactive({
  id: null,
  code: "",
  name: "",
  spec: "",
  model: "",
  material: "",
  brand: "",
  manufacturer: "",
  spareClass: "PART", // 备件所属
  designTemp: null, // 设计温度
  designPress: null, // 设计压力
  motorPower: null, // 电机功率
  minStock: 10,
  maxStock: 30,
  stockTotal: 0,
  stockAvailable: 0,
  type: 0,
  status: 0,
  remark: "",
});

/** 表单验证规则 */
const rules = {
  code: [{ required: true, message: "编码必填", trigger: "blur" }],
  name: [{ required: true, message: "名称必填", trigger: "blur" }],
  spareClass: [{ required: true, message: "备件所属必选", trigger: "change" }],
};

/** 处理备件所属字段变化 */
function handleParentTypeChange(value) {
  if (value === "MODULE" || value === "MACHINE") {
    form.designTemp = null;
    form.designPress = null;
    form.motorPower = null;
  }
}

/** 提交表单 */
function submit() {
  formRef.value.validate((ok) => {
    if (ok) {
      // 提交数据逻辑
      const payload = { ...form };
      emit("submit", payload);
    }
  });
}

function close() {
  visibleInner.value = false;
}

defineExpose({ open: () => (visibleInner.value = true), close });
</script>

<style scoped>
/* 样式优化 */
.form-module {
  margin-bottom: 24px; /* 模块间的间距 */
  padding: 16px;
  border-radius: 8px;
  background-color: #f4f7fc; /* 模块背景色 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
}

.form-module .module-header {
  font-size: 18px;
  font-weight: 600;
  color: #409eff; /* 标题颜色 */
  margin-bottom: 12px;
}

.top-form :deep(.el-form-item) {
  margin-bottom: 16px !important; /* 每个表单项之间的间距 */
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.el-dialog__body {
  padding: 20px 30px;
}
</style>
